<template>
    <div class="mainBox">
        <!-- <div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item
                    ><a
                        href="../index.html"
                        style="font-weight: 500;font-size: 16px;"
                        >班级</a
                    ></el-breadcrumb-item
                >
                <el-breadcrumb-item>
                    <span style="font-size: 16px;">智提本</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->

        <div class="titleRow">
            <div class="title">{{ name }}</div>
            <div>
                <el-button size="medium" @click="goBack"> 返回 </el-button>
            </div>
        </div>
        <el-card
            class="topic-analysis"
            v-for="(item, index) in datas"
            :key="index"
            shadow="hover"
        >
            <div class="topic-item">
                <div class="div-flex">
                    <div class="topic-item-title">
                        {{ index + 1 }}、
                        <template>
                            <el-tag
                                effect="plain"
                                size="mini"
                                type="warning"
                                v-if="item.source_type == 2"
                                >自评</el-tag
                            >
                            <el-tag
                                effect="plain"
                                size="mini"
                                type="warning"
                                v-if="item.source_type == 3"
                                >同步</el-tag
                            >
                            <el-tag
                                effect="plain"
                                size="mini"
                                type="warning"
                                v-if="item.source_type == 4"
                                >趣练</el-tag
                            >
                            <el-tag
                                effect="plain"
                                size="mini"
                                type="warning"
                                v-if="item.source_type == 5"
                                >智测</el-tag
                            >
                        </template>
                        <el-tag
                            effect="plain"
                            size="mini"
                            style="margin-left:5px"
                            >{{ item.question_type_name }}</el-tag
                        >

                        <div
                            v-html="item.question_title"
                            style="margin-left:10px; word-wrap: break-word;width: 90%;"
                        ></div>
                    </div>
                    <!-- <div class="topic-item-start">
                            <i
                                style="color: rgb(255,165,68);margin-right: 5px;"
                                class="el-icon-star-off"
                            ></i
                            >标记
                        </div> -->
                </div>
                <template
                    v-if="
                        (item.question_typeid != 3 &&
                            item.is_one_choice == 2) ||
                            item.is_many_choice == 2
                    "
                >
                    <div
                        class="analysis_text"
                        v-for="(val, id) in item.answer_list"
                        :key="id"
                    >
                        <div>{{ val.text }}、</div>
                        <div v-html="val.answer"></div>
                    </div>
                </template>
                <div class="topic-item-answer" v-if="item.is_sub_question == 1">
                    <div
                        class="div-flex-false"
                        v-if="item.is_sub_question == 1"
                    >
                        <div>你的答案：</div>
                        <div>
                            <template v-if="item.question_typeid == 11">
                                <div>
                                    <image
                                        class="yulanImg firstCanvas"
                                        :src="
                                            'data:image/jpeg;base64,' +
                                                item.myanswer
                                        "
                                        :style="{
                                            background:
                                                'url(' +
                                                item.question_photo +
                                                ') no-repeat'
                                        }"
                                        mode="aspectFit"
                                    ></image>
                                </div>
                            </template>
                            <template v-else>
                                <div>
                                    {{
                                        item.myanswer == "" ||
                                        item.myanswer == "undefined"
                                            ? "没答题"
                                            : item.myanswer
                                    }}
                                </div>
                            </template>
                        </div>
                        <div style="margin-left: 8px;" class="div-flex">
                            <i
                                v-if="item.is_answer == 2"
                                class="el-icon-check"
                                style="color: #18db60;font-size: 22px;margin-left: 3px;"
                            ></i>
                            <i
                                v-else
                                class="el-icon-close"
                                style="color: red;font-size: 22px;margin-left: 3px;"
                            ></i>
                        </div>
                    </div>
                    <div class="div-flex-true">
                        <div>正确答案：</div>
                        <div v-html="item.answer"></div>
                    </div>
                </div>
                <div class="topic-item-analysis">
                    <div class="topic-item-label">
                        答案解析：
                    </div>
                    <div
                        class="analysisMore"
                        v-html="item.question_analysis"
                    ></div>
                </div>
                <div class="topic-item-analysis" style="margin-top:20px">
                    <div class="topic-item-label">
                        知识点：
                    </div>
                    <div class="analysisMore">
                        章节/知识点：{{ item.gradeName1
                        }}{{ item.subject_name1 }}
                        {{ item.f_section_name1 }}
                        {{ item.section_name1 }}
                    </div>
                </div>
                <div class="error">
                    <div>{{ item.update_time }}</div>
                    <div style="margin-left:30px;color:red">
                        错{{ item.errors_num }}次
                    </div>
                    <div
                        style="margin-left:30px;color: #18db60;cursor: pointer;"
                        @click="detail(item.intelligent_id, item.answer_list)"
                    >
                        详细
                    </div>
                </div>
            </div>
        </el-card>
        <div class="pagination" v-if="datas.length > 0">
            <el-pagination
                @current-change="handleCurrentChange1"
                :current-page="page"
                background
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="total"
                :hide-on-single-page="true"
            >
            </el-pagination>
        </div>
        <el-dialog title="错题详细" :visible.sync="dialogTableVisible">
            <el-table :data="recodeList">
                <el-table-column
                    property="time"
                    label="时间"
                    align="center"
                ></el-table-column>
                <el-table-column label="你的答案" align="center">
                    <template slot-scope="scope">
                        <div
                            v-if="
                                scope.row.question_answer_id &&
                                    scope.row.question_answer_id != '0' &&
                                    scope.row.question_answer_id != 'undefined'
                            "
                        >
                            <div v-if="scope.row.question_typeid >= 3">
                                <div v-if="scope.row.user_text_answer">
                                    <div
                                        v-for="(item2, index2) in scope.row
                                            .user_text_answer"
                                        :key="index2"
                                    >
                                        {{ item2 }}
                                    </div>
                                </div>
                            </div>
                            <!-- 对答案进行转换abcd -->
                            <div v-else>
                                <div
                                    v-for="(item2, index2) in scope.row
                                        .question_answer_id"
                                    :key="index2"
                                >
                                    <div
                                        v-for="(item3, index3) in answer_list"
                                        :key="index3"
                                    >
                                        <div
                                            v-if="
                                                item2 ==
                                                    item3.question_answer_id
                                            "
                                        >
                                            {{ item3.text }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            没答题
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { getQuestionList } from "@/api/testQuestions/question";
import { latex_reques, latex_answer, getAnalysis } from "@/utils/latex";
import { getSectionDetail } from "@/api/testQuestions/section";
import { getBriefTime } from "@/utils/timeUtils";
import util from "@/utils/utilsTools";

import {
    intelligentLists,
    IntelligentListsDetail
} from "@/api/wisdomBook/index";
export default {
    components: {},
    props: {},
    data() {
        return {
            name: "",
            fname: "",
            zid: "",
            errors_num: "",
            total: "",
            groupid: "",
            loading: null,
            page: 1,
            pagesize: 5,
            datas: [],
            recodeList: [],
            dialogTableVisible: false
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
        this.name = this.$route.query.name;
        this.fname = this.$route.query.fname;
        this.zid = this.$route.query.zid;
        this.errors_num = this.$route.query.errors_num;
        this.total = this.$route.query.total;
        this.groupid = this.$route.query.groupid;
        console.log("name", this.name);
        console.log("name", this.fname);
        console.log("zid", this.zid);
        console.log("errors_num", this.errors_num);
        console.log("total", this.total);
        console.log("groupid", this.groupid);
        this.getlist();
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
    },
    methods: {
        getlist: function() {
            var data = {
                page: this.page,
                pagesize: this.pagesize,
                lists_type: 1,
                state: 1,
                zid: this.zid
            };
            intelligentLists(data).then(res => {
                console.log("res1", res.data);
                if (res.code == 200) {
                    this.total = res.data.total;
                    var data = res.data.data;
                    var question_ids_string = res.data.question_ids_string;
                    this.loaddata(data, question_ids_string);
                } else {
                    this.datas = [];
                }
            });
        },
        loaddata: function(list, question_ids_string) {
            this.loading = this.$loading({
                lock: true,
                text: "加载中",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.5)"
            });
            console.log("question_ids_string", question_ids_string);
            getQuestionList({
                question_id: question_ids_string,
                is_get_answer: 2,
                is_out_html: 1
            }).then(async res => {
                console.log("res2", res);
                if (res.code == 200) {
                    var dataList = res.data.data;
                    latex_reques(dataList, "question_title"); //解析 试题标题 latex 公式转换
                    latex_reques(dataList, "question_analysis"); //解析 试题解析 latex 公式转换
                    latex_answer(dataList, "answer_list"); //解析答案选项 latex 公式转换
                    for (let i = 0; i < dataList.length; i++) {
                        var arr = [];
                        for (let j = 0; j < list.length; j++) {
                            if (
                                dataList[i].question_id == list[j].question_id
                            ) {
                                var obj = {};
                                dataList[i].is_favorite = list[j].is_favorite;
                                obj.user_text_answer = list[j].user_text_answer;
                                obj.question_answer_id =
                                    list[j].question_answer_id;
                                arr.push(obj);
                            }
                        }
                        dataList[i].interest_lists_log = arr;
                    }

                    var da = getAnalysis(dataList);
                    this.datas = da;
                    for (let i = 0; i < this.datas.length; i++) {
                        for (let j = 0; j < list.length; j++) {
                            if (
                                this.datas[i].question_id == list[j].question_id
                            ) {
                                this.datas[i].source_type = list[j].source_type;
                                var time = list[j].update_time;
                                this.datas[i].update_time = getBriefTime(time);
                                this.datas[i].errors_num = list[j].errors_num;
                                this.datas[i].intelligent_id =
                                    list[j].intelligent_id;
                            }
                        }
                        await getSectionDetail({
                            zid: this.datas[i].zid
                        }).then(res => {
                            if (res.code == 200) {
                                var list = res.data[0];
                                this.datas[i].gradeName1 = util.getgradeName(
                                    list.grade
                                );
                                this.datas[i].subject_name1 = list.subject_name;
                                this.datas[i].f_section_name1 =
                                    list.f_section_name;
                                this.datas[i].section_name1 = list.section_name;
                            }
                        });
                    }
                }
                this.$forceUpdate();
                this.loading.close();
                console.log(" this.datas", this.datas);
            });
        },
        // 返回上一层
        goBack() {
            this.$router.go(-1); //返回上一层
        },
        detail(intelligent_id, answer_list) {
            this.answer_list = answer_list;
            var data = {
                intelligent_id: intelligent_id
            };
            IntelligentListsDetail(data).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.recodeList = res.data.data;
                    // var lists = this.recodeList;
                    // this.length = this.recodeList.length;
                    // this.bottomName = '答错'+this.length+'次'
                    // TODO: 以下暂时不需要，会显示不出答案
                    // for(var i = 0; i < lists.length; i++) {
                    // 	// lists[i].answer_list = this.data[0].answer_list;
                    // 	var arr=[];
                    // 	var obj={};
                    // 	obj.user_text_answer = lists[i].user_text_answer;
                    // 	obj.question_answer_id = lists[i].question_answer_id;
                    // 	arr.push(obj);
                    // 	lists[i].interest_lists_log=arr;
                    // }
                    // this.recodeList = util.getAnalysis(lists);
                    for (var j = 0; j < this.recodeList.length; j++) {
                        this.recodeList[j].time = getBriefTime(
                            this.recodeList[j].creat_time
                        );
                    }
                    this.dialogTableVisible = true;
                    console.log("this.recodeList", this.recodeList);
                }
            });
        },
        handleCurrentChange1(currentPage) {
            this.page = currentPage;
            this.getlist();
        }
    }
};
</script>

<style lang="scss" scoped>
.mainBox {
    width: 100%;
    padding: 26px;
    box-sizing: border-box;
    .title {
        font-size: 20px;
        color: #2d3440;
    }
}
.titleRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
/* 错题 */
.topic {
    margin-bottom: 24px;
    .topic-item {
        background: #fff;
        border-radius: 8px;
        padding: 16px;
        box-sizing: border-box;
    }
}
.topic-item {
    .topic-item-title {
        font-size: 16px;
        color: #707070;
        word-wrap: break-word;
        width: 100%;
        display: flex;
    }
    .topic-item-answer {
        margin: 10px 0px;
    }
    .div-flex-false {
        display: flex;
        align-items: center;
        color: #707070;
        font-size: 14px;
    }
    .div-flex-true {
        display: flex;
        align-items: center;
        margin-top: 10px;
        font-size: 14px;
        color: #18db60;
    }
    .topic-item-analysis {
        width: 45%;
    }
    .topic-item-label {
        color: black;
        font-weight: 550;
        margin-bottom: 8px;
    }
}
.div-flex {
    display: flex;
    align-items: center;
    .topic-item-mark {
        font-size: 16px;
        color: #707070;
    }
    .topic-item-start {
        font-size: 14px;
        color: #9ea4b0;
        width: 66px;
        height: 20px;
        line-height: 20px;
        background: #ffffff;
        text-align: center;
        border: 1px solid #9ea4b0;
        box-sizing: border-box;
        cursor: pointer;
        border-radius: 3px;
    }
}
.analysis_text {
    font-size: 14px;
    margin-top: 10px;
    color: #707070;
    display: flex;
}
.checkSub {
    width: 100%;
    text-align: right;
    font-size: 18px;
    color: #18db60;
}
// 填空题类型
.resultListType {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #999999;
}
.pagination {
    padding: 20px 0px;
    .el-pagination {
        text-align: center;
    }
}
.error {
    margin-top: 20px;
    display: flex;
    align-items: center;
}
</style>
